<template>
  <div>
    <div class="bg_grey_all"></div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >个人信息</van-col
      >
      <van-col span="8"></van-col>
    </van-row>

    <van-row class="topMargin">
      <van-col span="24" class="bg_grey_height"></van-col>
    </van-row>
    <van-row>
      <van-col span="24">
          <van-cell is-link @click="pickPhoto" size="large" label="点击从相册中选择或拍照上传" >
              <template #title>
                  <div style="vertical-align: middle;">更换头像照片</div>
                  
              </template>
            <template #right-icon>
                <!-- <div style="height:50px;width:50px">
                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3336668599,1294597107&fm=26&gp=0.jpg" style="width:100%; height:100%" />
                </div> -->
                <van-uploader ref="updr" max-count=1 :after-read="onRead" v-model="uploader" />
            </template>
          </van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24" class="bg_grey_height"></van-col>
    </van-row>
    <van-row>
      <van-col span="24">
          <van-cell title="更换登录手机号" is-link @click="redirectSubPage('valPhone');"></van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24" class="bg_grey_height"></van-col>
    </van-row>
    <van-row>
      <van-col span="24">
          <van-cell title="更换登录密码" is-link @click="redirectSubPage('changePassword');"></van-cell>
      </van-col>
    </van-row>

    <div class="footer">
      <van-button style="width:100px" square type="danger" size="small" @click="logOut">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Api, base_uri } from "../../../api/api_config";
import { Toast  } from 'vant'

export default {
  data() {
    return {
      uploader: [],
      baseUrl : '',
      currentUser: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.baseUrl = base_uri
      this.currentUser = this.$store.state.configuration.currentUser
      this.getUserAvatar();
    },
    back() {
      this.$router.push("/personalInfo");
    },
    pickPhoto() {
    },
    onRead(_file) {
      let file = _file.file;
      this.formData = new FormData();
      this.formData.append("files", file);
      let that = this;
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
      });
      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          console.log(response);

          const data = {
            id: that.currentUser.id,
            filelist: [
              {
                id: response.data[0].id,
                type: 8
              }
            ]
          }
          that.$axios({
                method: Api.User.avatar.method,
                url: Api.User.avatar.url,
                data: data
              })
            .then(function (res) {
              console.log(res);
              Toast.success('修改成功')
            })
            .catch(function (error) {
              console.log(error)
              Toast.clear()
            });
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    getUserAvatar() {
      let that = this;
      this.$axios({
        method: Api.file.file.method,
        url:
          Api.file.file.url + "?linkid=" + this.currentUser.id + "&filetype=8",
      })
        .then(function (res) {
          that.uploader.push({ url: that.baseUrl + res.data[0].file_path, isImage: true })
        })
        .catch(function (e) {
          console.log(e);
        });
    },
    redirectSubPage(e) {
      this.$store.state.tab_show = false;
      this.$router.push('/personalInfo/account/' + e);
    },
    logOut() {
      this.$store.state.clear();
      this.$router.push('/');
    }
  },
};
</script>

<style scoped>
</style>
